<template>
    <Layout :showHome="true" :showBtn="false" title="请假申请">
        <div class="content">
            <van-form @submit="onSubmit">
                <h3>请假</h3>
                <van-cell-group inset>
                    <van-field 
                    v-model="submitObj.userName" 
                    placeholder="请输入姓名" 
                    label="申请人："
                    :rules="[{ required: true, message: '请填写姓名' }]" 
                    />
                    <van-field 
                    v-model="submitObj.userId" 
                    placeholder="请输入工号" 
                    label="工号："
                    :rules="[{ required: true, message: '请填写工号' }]" 
                    />
                    <van-field 
                    v-model="submitObj.phone" 
                    placeholder="请输入电话" 
                    label="电话："
                    :rules="[{ required: true, message: '请填写电话' }]" 
                    />
                    <van-field 
                    v-model="submitObj.dept" 
                    name="dept" label="选择部门" 
                    is-link readonly
                    @click="showUnit = true" placeholder="所属部门："
                    :rules="[{ required: true, message: '请输入所属部门' }]" 
                    />
                </van-cell-group>

                <van-cell-group inset>
                    <van-field 
                    v-model="submitObj.vac" 
                    name="vac" label="假期" 
                    is-link readonly 
                    @click="vacUnit = true"
                    :rules="[{ required: true, message: '选择假期类型' }]" 
                    />
                    <van-cell 
                    title="请假时间" 
                    :value="date" 
                    @click="show = true" 
                    />
                    <van-calendar 
                    v-model:show="show" 
                    type="range" 
                    @confirm="onConfirm" 
                    />
                    <van-field 
                    v-model="submitObj.time" 
                    label="请假时长：" 
                    />
                    <van-field 
                    v-model="submitObj.shiyou" 
                    label="请假事由：" 
                    />
                </van-cell-group>

                <div style="margin: 30px;">
                    <van-button color="#3d3d3d" round block type="primary" native-type="submit">
                        提交
                    </van-button>
                </div>

                <van-popup v-model:show="showUnit" position="bottom">
                    <van-picker :columns="deptOptions" @confirm="deptPickerEvt" @click="showUnit = false" />
                </van-popup>

                <van-popup v-model:show="vacUnit" position="bottom">
                    <van-picker :columns="vacOptions" @confirm="vacPickerEvt" @click="vacUnit = false" />
                </van-popup>
            </van-form>
        </div>
    </Layout>
</template>
<script setup>
import { ref, reactive } from 'vue';
import { Toast } from 'vant';
import { useRouter } from 'vue-router'; 
import { leaveApplyApi } from '../../apis/leaveApply'

const router = useRouter()
const submitObj = reactive({
    userName:'',
    Id: '',
    phone: '',
    dept: '',
    time: '',
    shiyou: '',
    vac: ''
})

const deptOptions = ['财务部门', '人资部门', '软件部门', '开发部门']
const showUnit = ref(false)

const vacOptions = ['病假', '事假']
const vacUnit = ref(false)

const show = ref(false);
const date = ref('');

const formatDate = (date) => `${date.getMonth() + 1}/${date.getDate()}`;
const onConfirm = (values) => {
    const [start, end] = values;
    show.value = false;
    date.value = `${formatDate(start)} - ${formatDate(end)}`;
}

function deptPickerEvt(val) {
    submitObj.dept = val
    showUnit.value = false
}

function vacPickerEvt(val) {
    submitObj.vac = val
    showUnit.value = false
}

function onSubmit(submitObj) {
    // console.log(submitObj)
    // leaveApplyApi(submitObj).then(d => {
    //     // debugger
    //     if (d.code == 200) {
    //         Toast.success('申请成功')
    //         router.push('/home')
    //     } else {
    //         Toast.fail('-------申请失败')            
    //     }
    // })
        if (Math.random()<.5) {
            Toast.success('申请成功')
            router.push('/home')
        } else {
            Toast.fail('-------申请失败')            
        }
}

</script>
 
<style lang="less" scoped>
.content {
    background: #f5f7fb;
    >header {
        height: 50px;
        background: #c30e17;
        text-align: center;
        line-height: 50px;
        font-size: 18px;
        color: #f0eeee;
        >.van-icon {
            width: 40px;
            float: left;
            line-height: 50px;
            margin-left: 10px;
        }
    }

    .van-form {
        >h3 {
            padding: 0 15px;
            font-size: 16px;
        }
    }
    .van-cell-group {
        margin: 10px 10px;
        background-color: #ffffff;
    }
}
</style>